<template>
  <div>
    <div class="toolbar">
      <el-form :inline="true" :model="q" size="mini">
        <el-form-item  label="订单ID:">
          <el-input v-model="q.id"  onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="订单ID" prefix-icon="el-icon-edit"></el-input>
        </el-form-item>
        <el-form-item label="当前状态">
          <el-select v-model="q.status" clearable placeholder="请选择">
            <el-option label="所有" :value=null></el-option>
            <el-option v-for="(statu, index) of ReChargeStatus" :key="index" :label="statu" :value="index"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="text" disabled>{{this.Timetype?'申请时间':'最后更新时间'}}
          </el-button>
          (<el-button type="text" @click="toggleTimetype">点击切换</el-button>)
          <el-date-picker v-if="Timetype" v-model="q.created_at_begin" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
          <el-date-picker v-else v-model="q.updated_at_begin" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
          -<el-date-picker v-if="Timetype" v-model="q.created_at_end" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
          <el-date-picker v-else v-model="q.updated_at_end" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button type="danger" @click="reload">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row type="flex" class="row-bg btn-row" justify="end">
      <el-button size="mini" @click="add" type="primary" icon="el-icon-plus">申请信用金额</el-button>
    </el-row>
    <el-table :data="listData.items" v-loading.body="listLoading" @sort-change="sortlist" size="mini" stripe border fit highlight-current-row>
      <el-table-column prop="id" label="订单ID"  width="80" fixed="left"></el-table-column>
      <el-table-column prop="amount" label='申请金额' width="100"></el-table-column>
      <el-table-column prop="before_amount" label='申请前余额' width="120"></el-table-column>
      <el-table-column prop="created_at" label='申请时间' sortable width="180"></el-table-column>
      <el-table-column prop="status" label='当前状态' width="100">
        <template slot-scope="scope">{{ReChargeStatus[scope.row.status]}}</template>
      </el-table-column>
      <el-table-column prop="updated_at" label='最后更新时间' sortable width="160"></el-table-column>
      <el-table-column prop="success_at" label='到账时间' sortable width="180"></el-table-column>
      <el-table-column prop="chase_amount" label='追分金额' min-width="100"></el-table-column>
      <el-table-column prop="reason" label='备注' min-width="350" :show-overflow-tooltip="true"></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page="q.page_no" :page-sizes="$store.state.app.pageSizeArr"
                      :page-size="q.page_size"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="listData.total">
      </el-pagination>
    </div>
    <save-update  v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id"
                  ></save-update>
  </div>
</template>

<script>
  import saveUpdate from './saveUpdate'
  import { getAgencyRechargeList } from '@/api'
  import {queryFilter} from '@/utils/patch'
  import {setVcode} from "../../utils/auth";

  export default {
    components: {saveUpdate},
    data() {
      return {
        listData: {},
        q: {page_size: 30, page_no: 1},
        listLoading: false,
        Timetype: true,
        showUpdate: false,
        ReChargeStatus: this.$store.state.app.ReChargeStatus,
        show_id: null,
      }
    },
    activated(){
      this.getList()
    },
    deactivated(){
      this.listLoading = false
    },
    methods: {
      formatAgency(){
        return this.$store.state.user.userinfo.user_name||this.$store.state.user.userinfo.nickname;
      },
      add(){
        this.show_id = null
        this.showUpdate = true
      },
      resetPwd(){
        this.$message.warning('待开发')
      },
      update(row){
        this.show_id = row.id
        this.showUpdate = true
      },
      query(){
        this.q = Object.assign(this.q, {page_no: 1, page_size: 30})
        this.getList()
      },
      reload() {
        this.q = {page_size: 30, page_no: 1}
        this.getList()
      },
      toggleTimetype (){
        if(this.Timetype){
          delete this.q.created_at_begin
          delete this.q.created_at_end
          this.Timetype = !this.Timetype
        } else {
          delete this.q.updated_at_begin
          delete this.q.updated_at_end
          this.Timetype = !this.Timetype
        }
      },
      sortlist(sort){
        this.q.$orderby = sort.prop
        this.getList()
      },
      handleSizeChange (val) {
        this.q.page_size = val
        this.getList()
      },
      handleCurrentChange (val) {
        this.q.page_no = val
        this.getList()
      },
      getList(){
        this.q= queryFilter(this.q)
        getAgencyRechargeList(this.q).then(res => {
          if(res.status === 0){
            this.listLoading = false
            this.listData = res.data
            this.listData.items = Array.from(res.data.items,x=>Object.assign({},x,{amount:Number(x.amount)/100,before_amount:Number(x.before_amount)/100,chase_amount:Number(x.chase_amount)/100}))
          }
        })
      }
    },
    watch: {
      showUpdate() {
        if(!this.showUpdate){
          this.getList()
        }
      }
    }
  }
</script>
